<template>
  <div class="app-container">
    <div class="timestamp">
      <span v-if="showTimestamp" class="description"> {{ translation.timestamp }}: {{ classification.timestamp }} </span>
    </div>

    <el-form ref="classificationForm" :model="classification" label-width="120px">
      <div class="title">
      <el-form-item
                    :label="translation.title"
                    class="classification-title" prop="title"
                    :rules="[{ required: true, message: 'Titile can not be empty!', trigger: 'blur' },
      ]">
        <el-input v-if="editContent" v-model="classification.title" />
        <span v-else> {{ classification.title }} </span>
      </el-form-item>
      </div>

      <hr class="title-hr">

      <div v-for="(ele, index) in classification.degree">
        <el-form-item :label="translation.degree_code" v-if="editContent"
                      :prop="'degree.'+index+'.degree_code'">
          <el-input v-model="classification.degree[index].degree_code" />
        </el-form-item>

        <p v-else> {{ translation.degree_code }} : {{ classification.degree[index].degree_code }} </p>

        <el-form-item :label="translation.desc" v-if="editContent">
          <el-input v-model="classification.degree[index].desc" />
        </el-form-item>

        <p v-else> {{ translation.desc }} : {{ classification.degree[index].desc }} </p>

        <el-form-item :label="translation.possible_tags" v-if="editContent">
          <tags-input element-id="tags" :add-tags-on-space="true" :add-tags-on-comma="true"
                      :allow-duplicates="false" :existing-tags="classification.degree[index].possible_tags"
                      v-model="classification.degree[index].possible_tags"></tags-input>
        </el-form-item>
        <p v-else> {{ translation.possible_tags }} :
          <el-tag
          v-for="(tag,index) in classification.degree[index].possible_tags"
          :key="tag.key"
          type="info"> {{ tag.value }} </el-tag>
         </p>

        <el-button size="small" type="primary" @click="deleteLevel(index)" v-if="editContent">
          Delete
        </el-button>

        <hr class="level-hr">
      </div>
    </el-form>

    <el-button class="add-one" v-if="editContent" @click="addLevel" :disabled="addActive">
      <span class="svg-container">
        <i class="el-icon-circle-plus-outline" />
      </span>
    </el-button>
    <el-button v-if="editContent" size="small" type="primary"  @click="onSubmitClassification"> Save </el-button>
    <el-button
       v-if="editContent"
       type="primary"
       size="small"
       icon="el-icon-circle-check-outline"
       @click="clickEditContent"
     >
       Preview
     </el-button>
     <el-button
       v-else
       type="primary"
       size="small"
       icon="el-icon-edit"
       @click="clickEditContent"
     >
       Edit
     </el-button>
  </div>
</template>

<script>
import tagsInput from '../dreams/components/tagsInput'
import { getClassification, updateClassification } from '@/api/classification'
import { MessageBox, Message } from 'element-ui'
export default{
  components:{tagsInput},
  name: 'Classification',
  props: {
    editContent: {
      default: true
    }
  },
  data() {
    return {
      classification: {
        title: "",
        degree: [],
        timestamp: ""
      },
      translation: {
        degree_code: 'Level',
        desc: 'Description',
        possible_tags: 'Tags',
        title: 'Title',
        timestamp: 'Updated on'
      },
      // classificationRules: {
      //   title:[{ trigger:'blur', required: true, message: "Title can not be empty!" }],
      //   degree:[{ trigger:'blur', required: true, message: "Degree code can not be empty!" },
      //           { trigger: 'blur', min:1, max:10, message: "Degree code lenght is 1-10! " }]
      // },
      addActive: false,
      showTimestamp: false
    }
  },
  created() {
      console.log('Fetch classification ... ')
      // this.editContent = this.$route.params && this.$route.params.isEdit
      console.log('Edit info' + this.editContent)
      getClassification().then(response => {
        console.log(response)
        if (response.code === 20000) {
          this.classification.title = response.data.title
          this.classification.degree = response.data.degree
          if (response.data.last_update_time) {
            this.classification.timestamp = response.data.last_update_time
            this.showTimestamp = true
          } else {
            this.showTimestamp = false
          }
          // this.classification.last_update_time = response.data.last_update_time
          if (this.classification.title == 'default') {
            MessageBox.confirm('We advise that you set a personal classification to use statistics functions!', {
              confirmButtonText: 'OK',
              cancelButtonText: 'Cancel',
              type: 'warning'
            })
          }
        }
      })
  },

  methods: {
    clickEditContent(){
      if (this.editContent === false) {
        this.editContent = true
      } else {
        this.$message({
        message: 'The content has been edited',
        type: 'success',
        duration: 3 * 1000
      })
        this.editContent = false
      }
    },
    addLevel() {
      if (this.classification.degree.length > 8) {
        MessageBox.confirm('Max classification level is 7! You can not add level anymore!', {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning'
        })
        this.addActive = true
      } else {
        this.classification.degree.push({ degree_code: '', desc: '', possible_tags: [] })
      }
    },
    deleteLevel(index) {
      this.classification.degree.splice(index, 1)
      if (this.classification.degree.length < 7) {
        this.addActive = false
      }
      // console.log('deleted:', JSON.stringify(this.classification))
    },
    onSubmitClassification() {
      if (this.classification.degree.length > 8) {
        Message({
          message: 'Too many levels, please refine it!',
          type: 'error',
          duration: 5 * 1000
        })
      } else {
        console.log('update classification: ' + JSON.stringify(this.classification))
        updateClassification(this.classification).then(response => {
          console.log(response)
          if (response.code === 20000) {
            this.$router.go(0)
          }
        })
        // this.$route.go(0)
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.app-container {
  color: gray;
  font-family: fantasy;
}
.timestamp {
  .description {
    display: block;
    margin-left: 50px;
    padding: 2px 0;
    font-size: 10px;
    border-bottom: 1px solid #d2d6de;
    margin-bottom: 15px;
    padding-bottom: 15px;
    margin-left: 2%;
    color: #666;
  }
  span {
    font-weight: 500;
    font-size: 12px;
  }
}
.classification-title {
  padding: 10px 10px;
  margin: 10px 10px;
}

.title {
  padding: 20px 20px;
}

.title-hr {
  width:80%;
  margin:20px;
  border: 0;
  height: 4px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}
.level-hr {
  height:1px;
  border:none;
  border-top:1px dashed;
  width: 70%;
  margin-bottom: 50px;
  margin-left: 0px;
}
.el-button {
  margin-left: 2%;
  .add-one {
      display: block;
      padding: 10px 10px 10px 10px;
      margin-left: 96%;
  }
}

.el-tag{
  margin-left: 5px;
}

</style>
